UnitApi /
js
| Conditions | 10 |
| Total Lines | 57 |
| Code Lines | 25 |
| Lines | 57 |
| Ratio | 100 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like include-html.js ➔ includeHtml often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | View Code Duplication | function includeHtml(url, target, error, success) { |
|
|
Duplication
introduced
by
|
|||
| 2 | var xhttp; |
||
| 3 | |||
| 4 | var el = new E(target); |
||
| 5 | var elmnt = el.first(); |
||
| 6 | |||
| 7 | if (typeof success !== 'function') { |
||
| 8 | success = function () { |
||
| 9 | console.log('includeHtml success', "included"); |
||
| 10 | } |
||
| 11 | } |
||
| 12 | |||
| 13 | if (typeof error !== 'function') { |
||
| 14 | error = function () { |
||
| 15 | console.log('includeHtml error', "Page not found."); |
||
| 16 | } |
||
| 17 | } |
||
| 18 | console.log('includeHtml url', url); |
||
| 19 | |||
| 20 | if (url) { |
||
| 21 | /* Make an HTTP request using the attribute value as the url name: */ |
||
| 22 | xhttp = new XMLHttpRequest(); |
||
| 23 | xhttp.onreadystatechange = function () { |
||
| 24 | console.log('includeHtml el_id', target); |
||
| 25 | |||
| 26 | if (this.readyState == 4) { |
||
| 27 | if (this.status == 200) { |
||
| 28 | // console.log('elmnt', elmnt); |
||
| 29 | // console.log('responseText', this.responseText); |
||
| 30 | // elmnt.innerHTML = this.responseText; |
||
| 31 | // elmnt.appendChild(this.responseText); |
||
| 32 | // elmnt.insertAdjacentHTML('beforeend', this.responseText); |
||
| 33 | // var e = document.createElement('div'); |
||
| 34 | // e.innerHTML = this.responseText; |
||
| 35 | // while(e.firstChild) { |
||
| 36 | // elmnt.appendChild(e); |
||
| 37 | // } |
||
| 38 | |||
| 39 | // elmnt.insertAdjacentHTML('afterend', this.responseText); |
||
| 40 | elmnt.insertAdjacentHTML('beforeend', this.responseText); |
||
| 41 | |||
| 42 | success(this); |
||
| 43 | } |
||
| 44 | if (this.status == 404) { |
||
| 45 | elmnt.innerHTML = "includeHtml Page not found."; |
||
| 46 | error(this); |
||
| 47 | } |
||
| 48 | /* Remove the attribute, and call this function once more: */ |
||
| 49 | // includeHtml(url, success, error); |
||
| 50 | } |
||
| 51 | } |
||
| 52 | xhttp.open("GET", url, true); |
||
| 53 | xhttp.send(); |
||
| 54 | /* Exit the function: */ |
||
| 55 | return this; |
||
| 56 | } |
||
| 57 | } |
||
| 58 |
Loading history...